<template>
  <div class="header-wrapper" :style="{backgroundImage: 'url(' + headerBg + ')', paddingTop: paddingTop + 'px'}">
    <form class="header" action="#">
      <div class="search" ref="search">
        <i class="fa fa-search" aria-hidden="true" @click.stop="submitSearch"></i>
        <input type="search" :placeholder="searchPlaceHolder" v-model="searchValue" @change="change" @keyup.enter="submitSearch" />
        <i class="fa fa-times-circle" aria-hidden="true" v-show="showSearchBtn" @click="removeSearch"></i>
      </div>
      <div class="button" ref="button">
        <slot name="button">
          <p @click="back">取消</p>
        </slot>
      </div>
    </form>
  </div>
</template>

<script>
import headerBg from '@/assets/img/header_bg.png'
import { isIphoneX } from '@/assets/js/brower'

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    searchPlaceHolder: {
      type: String,
      default: '搜索...'
    },
    autoSearch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headerBg,
      paddingTop: 0,
      searchValue: '',
      showSearchBtn: false
    }
  },
  created() {
    if (isIphoneX()) {
      this.paddingTop = 34
    } else {
      this.paddingTop = 24
    }
  },
  mounted() {
    // this.$refs.search.style.width = window.innerWidth - this.$refs.button.clientWidth - 30 - 24 - 60 - 18 + 'px'
  },
  methods: {
    back() {
      window.history.length === 0
        ? this.$router.replace('/')
        : this.$router.go(-1)
    },
    change() {
      this.$emit('change', this.searchValue)
    },
    removeSearch() {
      this.searchValue = ''
      this.$emit('removeSearch')
    },
    submitSearch() {
      this.$emit('submitSearch', this.searchValue)
    }
  },
  watch: {
    searchValue(newValue, oldValue) {
      if (newValue.length > 0) {
        this.showSearchBtn = true
      } else {
        this.showSearchBtn = false
      }
    },
    value(val) {
      this.searchValue = val
      if (this.autoSearch && val !== '') {
        this.submitSearch()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.header-wrapper
  background-size cover
  background-repeat no-repeat
  .header
    position relative
    font-size $font-size-title
    color #fff
    height 48px
    overflow hidden
    padding 0 16px
    display flex
    align-items center
    justify-content space-between
    .search
      height 30px
      width calc(100% - 58px)
      border-radius 20px
      background #fff
      color #999
      display flex
      align-items center
      input
        background none
        border none
        height 30px
        width calc(100% - 80px)
        margin-right
        caret-color #5195d9
        color #666
        font-size 15px
        &:focus
          outline none
      .fa-search
        width 40px
        text-align center
        font-size 16px
      .fa-times-circle
        width 40px
        text-align center
        font-size 16px
    .button
      width 40px
      min-width 40px
input::-webkit-input-placeholder /* WebKit browsers */
  color #999
</style>
